<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>权力清单-条件检索</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">		
	</head>
	<style type="text/css">
        body{overflow:auto; background-color: #EFEFEF;}
        .mui-content,.mui-table-view{background-color: #EFEFEF;}
        .mui-segmented-control{text-align: center;}  
/*		.mui-control-content{min-height: 500px;}*/
		.mui-control-content .mui-loading{margin-top: 50px;}
		.mui-slider-indicator.mui-segmented-control{text-align: center; background-color: #fff; margin: auto; padding: 0 1.5rem; box-sizing: border-box;}
		.mui-segmented-control .mui-control-item{float:left;width: 2.2rem; color: #999; margin: auto; padding: .1rem 0; font-size: .3rem; box-sizing: border-box;}
        .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{width: 2.2rem; margin-left: 20%;margin-top: -2px;}
        .list_box{ /*border: 1px solid #cbcbcb;*/  background-color: #fff; text-align: center;display:inline-block;margin:0 .1rem .1rem .1rem;}
        .mui-table-view .list_box:nth-of-type(2n){margin-left: .4rem;}
        .midden{color: #333; background-color: #fff; font-size:.3rem; width: 3.33rem; height: 1.05rem;display:table-cell;vertical-align:middle;box-sizing:border-box;padding:0 .3rem;}
        .mui-table-view{padding: .25rem .35rem;}
        .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border: none;}
        .list_box img{display:inline-block;width:.5rem!important; height: .5rem; vertical-align: middle;/*margin: .03rem .03rem 0 0;*/float: left;margin-left: 0.4rem;margin-top: 0.3rem;}
        .table_view{padding:0 .2rem;}
        .mui-slider-indicator.mui-segmented-control{box-shadow:20px -18px 20px 8px #fff;} 
        .mui-table-view .list_box{ box-shadow: 0 0.05rem 0.1rem rgba(0,0,0,.1);} 
        .mui-scroll-wrapper{overflow: scroll;}  
        .mui-table-view .list_box{width: 3.1rem; height: 1.05rem; line-height:1.13rem; /*border: 1px solid #cbcbcb;*/  background-color: #fff; text-align: center; display: inline-block; margin-bottom: .3rem;}
        .mui-table-view .list_box:nth-of-type(2n){margin-left: .3rem;}
        .mui-table-view .list_box>a{color: #333; background-color: #fff; font-size:.3rem;width:100%;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
        .mui-table-view{padding: .25rem .3rem;}        
	</style>
	<body>
		<!-- 头部end -->	
		<!-- 主体start -->		
		<div class="mui-content">
             <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">按类别</a>
					<a class="mui-control-item" href="#item2mobile">按部门</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" id="sxlxUl">
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">																
								<ul class="table_view"  id="orgUl">
								</ul>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
		<!-- 主体end -->
	</body>
	<script>
		function my_immersed(immersed){
			
		}
	</script>
	<script src="../../js/immersed.js"></script>
	<script src="../../js/mui.min.js"></script><!-- mui -->
	<script src="../../js/common.js"></script><!-- 共用rem适配-js -->
	<script src="../../js/jquery2.2.4.min.js"></script>	<!-- jquery -->
	<script src="../../js/app.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});
			mui.plusReady(function() {
				var districtId = getCurrentDistrictId();
				loadData(districtId);
			});
			
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
			})(mui);
		
		/**
		 * 加载数据
		 * @param {Object} districtId 区划主键
		 */
		function loadData(districtId){
			    utils.showWaiting();
				var param = 'districtId=' + districtId + '&serviceType=1';
				var url = 'appHttpService/appQlqdQuery.do';
				utils.ajax(url, function(data) {
						data = JSON.parse(data);
						if(data.code == 0) {
							var serviceTypeList = JSON.parse(data.serviceTypeList);
							var orgList = JSON.parse(data.orgList);
							var serviceTypeDiv_html='<li id="" type="serviceType" class="list_box"><a><span class="category_ico01"></span>全部</a></li>';
							var index = 1;
							for(var i in serviceTypeList) {
								index++;
								if(index>6){
									index = 6;
								}
								serviceTypeDiv_html+="<li id='"+serviceTypeList[i].serviceTypeOid+"' type='serviceType' class='list_box'><a><span class='category_ico0"+index+"'></span>"+serviceTypeList[i].serviceTypeName+"</a></li>";
							}
							document.getElementById("sxlxUl").innerHTML = serviceTypeDiv_html;
							
							var orgDiv_html='<li id="" type="org" class="list_box"><span class="midden">全部</span></li>';
							for(var i in orgList) {
								orgDiv_html+="<li id="+orgList[i].oid+" type='org' class='list_box'><span class='midden'>"+orgList[i].name+"</span></li>";
							}
							document.getElementById("orgUl").innerHTML = orgDiv_html;
							
							var Height=$(window).height()-($("#sliderSegmentedControl").height()+$(".mui-bar-nav").height()+10)
							$(".mui-control-content").height(Height)
							$(window).resize(function(){
								var Height=$(window).height()-($("#sliderSegmentedControl").height()+$(".mui-bar-nav").height()+10)
								$(".mui-control-content").height(Height)
							})			
						}
						closeWaitingAndShowView(); 
					}, param);
				}
			
				/**
	             * 点击查询
	             */
				mui("body").on('tap','.mui-scroll li',function(){
					var id = this.getAttribute('id');
					var type = this.getAttribute('type');
					if(type == 'org'){
						showTemplates('qlqd_index.html','政府行政权力清单','../ygzw/qlqd_index.html?fwbm='+ id + '&serviceType=1');
					}else if(type == 'serviceType'){
						showTemplates('qlqd_index.html','政府行政权力清单','../ygzw/qlqd_index.html?sxlx=' + id + '&serviceType=1');
					}
	            })
				
		</script>
	
</html>
